<script setup>
import { reactive } from "vue"
import AccountService from "@/stores/AccountService"
import routes from "@/routes";

const count = ref(0)
const account = reactive({
  username: '',
  password: ''
})
//处理登录
const handlerLogin = async ()=>{
  const [err, res] = await AccountService.promise_process(AccountService.login(account));
  if(err){
    console.log(err)
    ElMessage({
          message: '请求服务器失败',
          type: 'error',
        })
  }
  if(res){
    console.log(res)
    if(res.code == 1){
      ElMessage({
        showClose: true,
        message: '用户名或密码错误',
        type: 'error',
      })
    }else{
      ElMessage({
        showClose: true,
        message: '登录成功!',
        type: 'success',
      })
      //将登陆的账号信息存入session
      let account = res.data
      console.log(account)
      let loginAccount = {
          username: account.username,
          listOption: account.listOption,
        }
        // console.log(loginAccount)
      window.sessionStorage.setItem('loginAccount', JSON.stringify(loginAccount));
      routes.push('/home')
    }
  }
}
</script>

<template>
  <Top />
  <div class="signon">

        <h2>登录</h2>
        <el-divider />
        <el-form class="form">
          <el-form-item label="账号" style="margin-bottom: 10%">
            <el-input v-model="account.username" type="text">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" style="margin-bottom: 10%">
            <el-input v-model="account.password" type="password">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 10%">
                <el-button
                type="success"
                plain
                style="margin-left: 25%; width: 50%;margin-bottom: 5%;"
                @click="handlerLogin"
                >
                登录
                </el-button>
                <el-button
                type="info"
                plain
                style="margin-left: 25%; width: 50%"
                @click="routes.push('/register')"
                >
                注册
                </el-button>
          </el-form-item>
        </el-form>
  </div>
  <Bottom />
</template>

<style scoped>
</style>
